<template>
  <div class="main">
    <div class="filter">
<!--      <el-input placeholder="请输入客户名" type="small" v-model="form.khname" clearable></el-input>-->
      <el-date-picker
        v-model="form.startTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="开始时间">
      </el-date-picker>
      <el-button type="primary" class="el-icon-search" @click="getThatDayData">当天所有</el-button>
    </div>
    <div class="result" v-loading="result_loading">
      <el-collapse accordion @change="handleChange">
        <div v-if="result.length === 0" class="no-data">无数据</div>
        <div v-if="result.length" class="no-data">
          共{{ this.result.length }}条数据,总金额：{{ this.totalJe }},总欠款：{{ this.totalQk }}
        </div>
        <el-collapse-item v-for="(item,index) in result" :title="item.dh" :key="item.dh" :name="index" :id="index">
          <template slot="title">
            <el-tag size="mini" style="margin: 5px;">{{ item.Dte }}</el-tag>
            <el-tag size="mini" style="margin: 5px;">{{ item.op }}</el-tag>
          </template>
          <el-row class="des-box">
            <el-col :span="5" class="des-title">单号</el-col>
            <el-col :span="19" class="des-content">
              <span style="font-size: 0.6rem;">{{ item.billID }}</span>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="detail-collapse">
      <div class="title">
        <el-tag size="mini" v-show="currentIndex !== null" style="max-width: 150px;overflow: hidden;float: left;margin-left: 4px;">{{ currentIndex !== null ? result[currentIndex].billID : '' }}</el-tag>
        <el-button size="mini" type="primary" @click="jumpToCurrent" style="margin-top: -4px;">跳回</el-button>
        <span v-show="!detail_collaspe" @click="collaspeDetail(true)">展开</span>
        <span v-show="detail_collaspe" @click="collaspeDetail(false)">隐藏</span>
        <i class="el-icon-arrow-down collapse" @click="collaspeDetail(false)" v-show="detail_collaspe"></i>
        <i class="el-icon-arrow-up collapse" @click="collaspeDetail(true)" v-show="!detail_collaspe"></i>
      </div>
      <el-collapse-transition>
        <div class="content" v-show="detail_collaspe" v-loading="detail_loading">
          <div class="detail-scroll">
            <div class="detail-item" v-for="(item,index) in detail_data" :key="item.lineNum">
              <el-col :span="15" class="des-title"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ item.name }}</span></el-col>
              <el-col :span="3" class="des-title">数量</el-col>
              <el-col :span="6" class="des-content">{{ item.qty.replace(/.0$/, '') + item.unitsSet }}</el-col>
            </div>
            <div class="scroll-bottom"> --- 到底了 --- </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import {queryZD, getRecentZD, getZDdetail, getThatDayZD, ckSaleQuery, ckPurDetail, ckPurQuery} from "@/api/goods";

function compare(property){
  return function(a,b){
    var value1 = a[property];
    var value2 = b[property];
    return value1 - value2;
  }
}

export default {
  name: "CKQuery",
  data() {
    return {
      form: {
        khname: '',
        startTime: '',
        endTime: ''
      },
      result: [],
      totalJe: 0,
      totalQk: 0,
      detail_collaspe: false,
      detail_data: null,
      detail_loading: false,
      result_loading: false,
      currentIndex: null,
      intervalId: null
    }
  },
  methods: {
    searchBill() {
      if (this.form.khname !== '') {
        this.result_loading = true
        queryZD(this.form).then(res => {
          if (res.code === 200) {
            this.result = res.data
            if (res.data.length) {
              let totalJe = 0, totalQk = 0
              res.data.forEach((each) => {
                totalJe += each.je
                totalQk += each.qk
              })
              this.totalJe = totalJe
              this.totalQk = totalQk
            } else {
              this.$message.warning('无数据')
            }
          }
        }).finally(()=>{
          this.result_loading = false
          this.currentIndex = null

        })
      } else {
        getRecentZD().then((res)=>{
          this.result = res.data
          this.currentIndex = null
        })
      }
    },
    jumpTodetail(dh) {
      this.$router.push({path: '/zd/detail', query: {dh}})
    },
    collaspeDetail(flag) {
      this.detail_collaspe = flag
    },
    handleChange(val) {
      if(val !== ''){

        this.currentIndex = val


        setTimeout(()=>{
          this.jumpToCurrent()
        },500)

        this.detail_collaspe = true
        this.detail_loading = true
        ckPurDetail(this.result[val].billID).then((res)=>{
          this.detail_data = res.data
        }).finally(()=>{
          this.detail_loading = false
          this.currentIndex = null
        })
      }
    },
    getThatDayData(){
      let data1 = {
        startTime:  this.form.startTime,
        endTime: this.form.startTime
      }
      this.result_loading = true
      ckPurQuery(data1).then((res)=>{
        this.result = res.data
      }).finally(()=>{
        this.result_loading = false
        this.detail_data = null
      })

      this.$buryingPoint('查询仓库入仓单-当天', null)
    },
    jumpToCurrent(){
      let currentRoute = this.$route.path
      let a = document.createElement('a')
      a.href = '#' + this.currentIndex
      let body = document.querySelector('body')
      body.appendChild(a)
      a.click()
      body.removeChild(a)
      this.$router.push(currentRoute)
    }
  },
  created() {
    const date = new Date();
    const date2 = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
    this.form.startTime = date.toLocaleDateString().replace(/\//g, '-')
    this.form.endTime = date2.toLocaleDateString().replace(/\//g, '-')

  },
  mounted() {
    const date = new Date()
    let data = {
      startTime: date.toLocaleDateString().replace(/\//g, '-'),
      endTime: date.toLocaleDateString().replace(/\//g, '-')
    }
    ckPurQuery(data).then((res)=>{
      this.result = res.data
    })

    this.$buryingPoint('查询仓库入仓单', JSON.stringify(data))

    this.intervalId = setInterval(()=>{
      let ele = document.querySelector('#app > div > div.sidebar-container > div > div.scrollbar-wrapper.el-scrollbar__wrap')
      let ele2 = document.querySelector('.detail-collapse')
      if(ele.clientWidth > 200 && document.body.clientWidth < 1000) {
        ele2.setAttribute('style', 'left: 0')
      } else {
        ele2.setAttribute('style', 'left:' + ele.clientWidth + 'px')
      }
    },1000)
  },
  destroyed() {
    clearInterval(this.intervalId)
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 600px;
  padding: 10px;

  .filter {
    .el-input {
      margin-bottom: 5px;
    }

    .el-date-editor {
      margin-right: 10px;
    }
  }

  .result {
    padding-bottom: 280px;

    .no-data {
      padding: 20px;
      text-align: center;
      color: #ccc;
    }

    .des-box {
      border-top: 1px solid #6595c7;
      border-left: 1px solid #6595c7;
    }

    .des-title {
      height: 25px;
      background-color: #c1d7ea;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }

    .des-content {
      height: 25px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }
  }

  .detail-collapse {
    width: 100%;
    max-width: 580px;
    border-top: 1px solid #ccc;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;

    .detail-scroll {
      overflow: scroll;
      max-height: 80vh;
      width: 100%;
      padding-right: 1px;

      .scroll-bottom {
        text-align: center;
        color: #ccc;
        height: 50px;
        padding: 10px;
      }
    }

    .content {

      min-height: 100px;
      .detail-item {
        border-bottom: 1px solid #6595c7;
        height: 30px;
      }

      .des-title {
        font-size: 0.8rem;
        height: 30px;
        background-color: #c1d7ea;
        display: flex;
        align-items: center;
        padding-left: 10px;
        border-bottom: 1px solid #6595c7;
        border-right: 1px solid #6595c7;
        text-overflow: clip;
      }

      .des-content {
        font-size: 0.8rem;
        height: 30px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        border-bottom: 1px solid #6595c7;
        border-right: 1px solid #6595c7;
      }
    }

    .title {
      height: 35px;
      width: 100%;
      text-align: right;
      border-bottom: 1px solid #ccc;
      padding-top: 8px;
    }
  }
}

html {
  scroll-behavior: smooth;
}
</style>
